<template>
    <a-drawer v-if="visible" :append-to-body="true" :width="540" :visible="visible" :closable="false"
      @cancel="closeDrawer()" @ok="save()" ok-text="保存">
      <template #title>
        <EditableText :value="flowNodeConfig.name" @change="onNodeNameChange" />
      </template>
      <div class="common-drawer__content">
        <!--记录日志-->
        <div class="item-wrap sign-type">
          <div class="item-key-wrapper">
            <div class="item-key">记录日志</div>
          </div>
          <div class="item-content" style="margin:20px">
            是否开启 
            <a-switch v-model="flowNodeConfig.enableLog" type="round" :checked-value="1" :unchecked-value="0" />
          </div>
        </div>
        <div class="item-wrap sign-type">
          <div class="item-key-wrapper">
            <div class="item-key">命令</div>
          </div>
          <div class="item-content">
            <JsEditor v-model:value="flowNodeConfig.command"></JsEditor>
          </div>
        </div>
      </div>
    </a-drawer>
  </template>
  <script setup>
  import useApp from "@/hooks";
  const { $ } = useApp();
  import ArrayUtil from "../common/ArrayUtil";
  import Snowflake from "../common/Snowflake";
  import { IconDelete, IconSwap, IconPlus } from "@arco-design/web-vue/es/icon";
  import EditableText from "@/components/common/EditableText.vue";
  const visible = ref(false)
  import { NODE } from "../common/FlowConstant";
  $.on(NODE.GOTO + '-drawer-open', config => {
    flowNodeConfig.value = config;
    visible.value = true;
  })
  let flowNodeConfig = ref({});
  // 编辑节点名称
  const onNodeNameChange = (name) => {
    flowNodeConfig.value.name = name;
    save(false);
  };
  
  const save = (leave = true) => {
    leave && closeDrawer();
  };
  
  const closeDrawer = () => {
    visible.value = false;
  };
  
  </script>
  <style lang="less">
  @import "./style/common.less";
  </style>
  